@import "../../../../common/stylus/theme.styl";

body
  .side-bar
    position fixed
    display flex
    top 0
    left 0
    right 0
    bottom 0
    background transparent
    border-left none
    box-shadow none
    transition all 0.4s 0.1s cubic-bezier(0.4, 0, 0, 1)
    transform translate(-100%, 0)
    overflow hidden
    z-index 9999
    &.open
      transform translate(0, 0)
  .main-area
    flex 0 0 290px
    .top-wrapper
      position absolute
      left 0
      right 0
      top 0
      width 290px
      bottom 0px
      background $default-background-color
      overflow-x hidden
      overflow-y auto
      .top-area
        position relative
        height 165px
        img
          position absolute
          width 100%
          height 100%
        .site-info
          position absolute
          top 0
          right 0
          bottom 0
          left 0
          padding $mobile-header-height + 5 0 0 15px
          .site-name
            font-size 1.6em
            line-height 1.8em
            font-weight 700
            color $default-background-color
          .site-desc
            font-size 1em
            line-height 1.2em
            color $default-background-color
      .sidebar-search
        padding 5px 15px
        margin-bottom 10px
        .search-view, .result-area
          width 100%
      .sidebar-menus
        .site-nav
          display flex
          justify-content space-between
          align-items center
          height 42px
          padding 8px 15px
          border-bottom 1px solid $default-border-color
          background $default-border-hover-color
          > p
            font-size 16px
            color $default-info-color
        // 站点导航
        ul
          list-style-type none
          padding-left 1.4em
        ul.nav-menu
          display block
          padding 8px 15px
          transition all 0.7s
          max-height 300px
          overflow hidden
          &.hide
            padding 0 15px
            max-height 0
          li
            line-height 1.8em
            > i
              color $default-link-color
            > a
              font-size 17px
              color $default-link-color
              &:hover, &.active
                color $default-link-hover-color
            > ul > li > a
              font-size 15px
              color $default-link-color
          .nav-link
            text-decoration none
            &:hover, &.active
              text-decoration underline
              color $default-link-hover-color
        // 生成Toc目录css
        .sidebar-toc-list
          .menu-root
            padding-left 0
            line-height: 1.4em
          #sidebar-toc
            position relative
            padding 15px
            .toc-link
              padding-left 0.3em
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              &::before
                background transparent
            .active
              font-weight: 700;
              color: #409eff;
              border-left: 2px solid #409eff;

              &::before
                background-color $default-link-hover-color
    // 配置操作区域
    .sidebar-operate-area
      position absolute
      display flex
      justify-content flex-end
      align-items center
      left 0
      bottom 0
      width 290px
      height 44px
      padding 8px 15px
      border-top 1px solid $default-border-color
      background $default-border-hover-color
      .ivu-btn
        border-color $default-info-color

  .mask
    width 100%
    height 100%
    transition all 0.2s ease-in-out
    background rgba($default-select-background-hover-color, 0.5)

body.dark
  .side-bar
  .main-area
    .top-wrapper
      background $dark-background-color
      .top-area
        .site-info
          .site-name
            color $default-background-color
          .site-desc
            color $default-background-color
      .sidebar-menus
        .site-nav
          border-bottom 1px solid $dark-border-color
          background $dark-border-hover-color
          > p
            color $dark-info-color
        // 站点导航
        ul.nav-menu
          li
            > i
              color $dark-link-color
            > a
              color $dark-link-color
              &:hover, &.active
                color $dark-link-hover-color
            > ul > li > a
              color $dark-link-color
          .nav-link
            &:hover, &.active
              color $dark-link-hover-color
        // 生成Toc目录css
        .sidebar-toc-list
          #sidebar-toc
            padding 15px
            > .toc-list
              padding-left 0
            .toc-link
              &::before
                background transparent
            .is-active-link
              &::before
                background-color $dark-link-hover-color
    // 配置操作区域
    .sidebar-operate-area
      border-top 1px solid $dark-border-color
      background $dark-border-hover-color
      .ivu-btn
        border-color $dark-info-color



